<template>
  <div class="home-container">
    <div class="passenger-select">
      <div class="passenger-select1">
        <market @listenEvent="mkfn" />
      </div>
    </div>
    <div class="title">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-card shadow="hover">
            <div>
              <div style="margin-bottom: 5px">
                <span>今日交易额：</span>
                <span>{{ (todaySales.Sales / 100).toFixed() }}</span>
              </div>
              <div style="margin-bottom: 5px">
                <span>昨日：</span>
                <span>{{ (yesterdaySales.Sales / 100).toFixed() }}</span>
              </div>
              <div style="margin-bottom: 5px">
                <span>环比：</span>
                <span v-show="yesterdaySales.Sales === 0"> 0%</span>
                <span v-show="yesterdaySales.Sales !== 0">
                  {{
                    Math.round(
                      ((todaySales.Sales - yesterdaySales.Sales) /
                        yesterdaySales.Sales) *
                        100
                    )
                  }}%</span
                >
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div style="margin-bottom: 5px">
              <span>交易笔数：</span>
              <span>{{ (todaySales.DocCount * 1).toFixed() }}</span>
            </div>
            <div style="margin-bottom: 5px">
              <span>昨日：</span>
              <span>{{ (yesterdaySales.DocCount * 1).toFixed() }}</span>
            </div>
            <div style="margin-bottom: 5px">
              <span>环比：</span>
              <span v-show="yesterdaySales.DocCount === 0"> 0%</span>
              <span v-show="yesterdaySales.DocCount !== 0"
                >{{
                  Math.round(
                    ((todaySales.DocCount - yesterdaySales.DocCount) /
                      yesterdaySales.DocCount) *
                      100
                  )
                }}%</span
              >
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div style="margin-bottom: 5px">
              <span>交易量：</span>
              <span>{{ (todaySales.Weight / 1000).toFixed() }}</span>
            </div>
            <div style="margin-bottom: 5px">
              <span>昨日：</span>
              <span>{{ (yesterdaySales.Weight / 1000).toFixed() }}</span>
            </div>
            <div style="margin-bottom: 5px">
              <span>环比：</span>
              <span v-show="yesterdaySales.Weight === 0"> 0%</span>
              <span v-show="yesterdaySales.Weight !== 0"
                >{{
                  Math.round(
                    ((todaySales.Weight - yesterdaySales.Weight) /
                      yesterdaySales.Weight) *
                      100
                  )
                }}%</span
              >
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div style="margin-bottom: 5px">
              <span>客单价：</span>
              <span>{{ Math.round(todaySales.PCT).toFixed() }}</span>
            </div>
            <div style="margin-bottom: 5px">
              <span>昨日：</span>
              <span>{{ Math.round(yesterdaySales.PCT).toFixed() }}</span>
            </div>
            <div style="margin-bottom: 5px">
              <span>环比：</span>
              <span v-show="yesterdaySales.PCT === 0"> 0%</span>
              <span v-show="yesterdaySales.PCT !== 0"
                >{{
                  Math.round(
                    ((todaySales.PCT - yesterdaySales.PCT) /
                      yesterdaySales.PCT) *
                      100
                  )
                }}%</span
              >
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="echarts">
      <Echart :echartObj="options"></Echart>
    </div>

    <div class="passenger-select2">
      <span style="font-size: 15px; padding-left: 15px; padding-right: 15px"
        >菜品销量走势</span
      >
      <el-date-picker
        v-model="datevalue"
        type="week"
        @change="onPick"
        format="yyyy 第 WW 周"
        placeholder="选择周"
      >
      </el-date-picker>
    </div>
    <div class="echarts">
      <Echart :echartObj="options2"></Echart>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import market from "@/views/modules/marketcopy";
import moment from "moment";
import Echart from "@/components/echart/echart";
import { formatDate, formatDate2 } from "@/utils";
export default {
  name: "Home",
  components: {
    Echart,
    market,
  },
  data() {
    return {
      datevalue: formatDate(new Date()),
      search: "search",
      form: {},
      marketId: "",
      options: {},
      options2: {},
      todaySales: { Sales: 0, DocCount: 0, Weight: 0, PCT: 0 },
      yesterdaySales: { Sales: 0, DocCount: 0, Weight: 0, PCT: 0 },
      date: "",
    };
  },
  computed: {
    // ...mapGetters(['name'])
  },
  watch: {
    marketId(val, oldval) {
      let marketId = 1;
      let year = this.date.substr(0, 4);
      let month = this.date.substr(5, 2);
      let day = this.date.substr(8, 2);
      let d = new Date();
      d = +d - 1000 * 60 * 60 * 24;
      d = new Date(d);
      let yesterdayDay = d.getDate();
      let yesterdayMonth = d.getMonth() + 1;
      if (val == 0) val = 1;
      this.fetchMarketDailySales(
        val,
        year,
        month,
        yesterdayMonth,
        day,
        yesterdayDay
      );
      this.hourlyHistogram(val, year, month, yesterdayMonth, day, yesterdayDay);
    },
  },
  mounted() {
    this.getSearch();

    this.date = moment().format("YYYY-MM-DD");
    // console.log(this.date);
    let marketId = 1;
    let year = this.date.substr(0, 4);
    let month = this.date.substr(5, 2);
    let day = this.date.substr(8, 2);

    let d = new Date();
    d = +d - 1000 * 60 * 60 * 24;
    d = new Date(d);
    let yesterdayDay = d.getDate();
    let yesterdayMonth = d.getMonth() + 1;

    // this.fetchMarketDailySales(
    //   marketId,
    //   year,
    //   yesterdayMonth,
    //   month,
    //   day,
    //   yesterdayDay
    // );
    this.hourlyHistogram(
      marketId,
      year,
      yesterdayMonth,
      month,
      day,
      yesterdayDay
    );
    // this.datevalue = this.getYearWeek(this.date);
    // console.log(this.datevalue );
    this.weight_trend(2, this.datevalue);
  },
  methods: {
    getSearch() {
      this.$store.dispatch("marketInfoMge/getSearch", { keyword: this.search });
    },
    fetchMarketDailySales(
      marketId,
      year,
      yesterdayMonth,
      month,
      day,
      yesterdayDay
    ) {
      this.$store
        .dispatch("home/fetchMarketDailySales", {
          marketId,
          year,
          yesterdayMonth,
          month,
          day,
          yesterdayDay,
        })
        .then((data) => {
          if (Object.keys(data[0]).length == 0) {
            data[0] = { Sales: 0, DocCount: 0, Weight: 0, PCT: 0 };
          }
          if (Object.keys(data[1]).length == 0) {
            data[1] = { Sales: 0, DocCount: 0, Weight: 0, PCT: 0 };
          }
          this.todaySales = data[0];
          this.yesterdaySales = data[1];
        })
        .catch((err) => {
          console.log("views-home-index.js-fetchMarketDailySales", err);
        });
    },
    hourlyHistogram(marketId, year, yesterdayMonth, month, day, yesterdayDay) {
      this.$store
        .dispatch("home/hourlyHistogram", {
          marketId,
          year,
          yesterdayMonth,
          month,
          day,
          yesterdayDay,
        })
        .then((data) => {
          // console.log(data);

          this.options = data;
        })
        .catch((err) => {
          console.log("views-home-index.js-fetchMarketDailySales", err);
        });
    },

    weight_trend(type, date) {
      this.$store
        .dispatch("home/weight_trend", {
          type: type,
          date: date,
        })
        .then((data) => {
          // console.log(data);

          this.options2 = data;
        })
        .catch((err) => {
          console.log("views-home-index.js-fetchMarketDailySales", err);
        });
    },

    mkfn(param) {
      this.marketId = param.marketId;
    },
    getYearWeek(date) {
      date = formatDate(date);
      let dateYear = date.substr(0, 4);
      // console.log(date);
      date = new Date(date);
      var date2 = new Date(date.getFullYear(), 0, 1);
      var day1 = date.getDay();
      if (day1 == 0) day1 = 7;
      var day2 = date2.getDay();
      if (day2 == 0) day2 = 7;
      let d = Math.round(
        (date.getTime() -
          date2.getTime() +
          (day2 - day1) * (24 * 60 * 60 * 1000)) /
          86400000
      );
      // console.log(Math.ceil(d / 7) + 1);
      return dateYear + "-" + (Math.ceil(d / 7) + 1 + "");
    },

    onPick(val) {
      // val = this.getYearWeek(val);切换成2020-49

      // console.log(val);
      // this.datevalue=val
      this.weight_trend(2, formatDate(val));
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.echarts {
  text-align: center;
  background: #fff;
  height: 390px;
  margin-bottom: 15px;
}
.passenger-select {
  display: flex;
  justify-content: flex-start;
}
.passenger-select1 {
  margin-right: 30px;
  // padding-top: 3px;
  // background: #fff;
}
.passenger-select2 {
  margin-bottom: 15px;
}
</style>


